<template>
    <h2>借款还款</h2>
    <table class="table-bordered" border="1">
        <thead style="background-color: aqua;">
            <tr>
                <td>借款款项编号</td>
                <td>借款款项名称</td>

                <td>借款最高金额</td>
                <td>借款最高年限</td>
                <td>预计月还款金额</td>
                <td>利息值</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{ item.BM_Id }}</td>
                <td>{{ item.BM_Name }}</td>

                <td>{{ item.BM_Money }}CNY</td>
                <td>{{ item.BM_Year }}年</td>
                <td>{{ ((item.BM_Money+(item.BM_Money*item.BMI_Interest/100))/item.BM_Year/12).toFixed(2) }}CNY</td>
                <td>{{ item.BMI_Interest }}%</td>
                <td>
                    <a href="#" @click="onUserRefund(item.UBM_ID)">还款</a>
                  
                </td>
            </tr>
        </tbody>
    </table>
    <span>当前共{{ Fenye.Count }}条数据，共{{ Fenye.PageCount }}页,当前第{{ Fenye.PageIndex }}页,每页{{ Fenye.PageSize }}条</span>
    <a style="color: blue;" @click="PageInfoLoad('F')">首页</a>
    <a style="color: blue;" @click="PageInfoLoad('P')">上一页</a>
    <a style="color: blue;" @click="PageInfoLoad('N')">下一页</a>
    <a style="color: blue;" @click="PageInfoLoad('L')">尾页</a>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../../store/index.ts';

const userStore=useUserStore();

const router = useRouter();
//创建生命周期函数构


onMounted(() => {
    //获取数据
    select();
})

const info = ref([{
    BM_Id: 0,
    BM_Name: '',
    BM_Year: 0,
    BM_Money: 0,
    BM_Info: '',
    BMI_Interest: 0,
    Uid:'',
    UBM_ID:0,
}]);

const Fenye = ref({
    PageIndex: 1,
    PageSize: 2,
    Count: 0,
    PageCount: 0,
});

const PageInfoLoad = (msg: string) => {
    switch (msg) {
        case 'F':
            Fenye.value.PageIndex = 1;
            break;
        case 'P':
            if (Fenye.value.PageIndex > 1) {
                Fenye.value.PageIndex--;
            }
            else {
                alert('当前已经是首页了')
            }
            break;
        case 'N':
            //当前页码必须小于总页码，方可点击下一页
            if (Fenye.value.PageIndex < Fenye.value.PageCount) {
                Fenye.value.PageIndex++;
            }
            else {
                alert('当前已经是尾页了')
            }
            break;
        case 'L':
            Fenye.value.PageIndex = Fenye.value.PageCount;
            break;
        default:
            Fenye.value.PageIndex = 1;
            break;
    }
    select()
}

//获取数据
const select = () => {
    //发送请求
    axios({
        url: 'https://localhost:44387/api/Borrows/ShowBorrowMoneyInfo2',
        method: 'get',
        params: {
            Uid: userStore.UserId,
            PageIndex: Fenye.value.PageIndex,
            PageSize: Fenye.value.PageSize,
            Count: Fenye.value.Count,
            PageCount: Fenye.value.PageCount,
        }
    }).then(res => {
        info.value = res.data.list;

        //将获取到的数据总数、总页数依次赋值
        Fenye.value.Count = res.data.totalCount;
        Fenye.value.PageCount = res.data.pageCount;
        console.log(res.data);
        console.log(res.data.pageCount);
    }).catch(err => {
        console.log(err);
    })
}
const onUserRefund=(UBM_ID:number)=>{
    console.log(UBM_ID);
    router.push(
        {
            path:'/UserAddBorrowRefund',
            query:{
                UBM_ID:UBM_ID
            }
        }
    )
}

</script>




